let main_box = document.querySelector("#main_box ul");
let change = document.querySelector(".change");
let before = document.querySelector(".before");
let after = document.querySelector(".after");
let pageid = 1;


let url = decodeURI(location.href).split("?")[1].split("=")[1];
console.log(url);

let pBox = localStorage.getItem("pbox");
let nav = document.querySelector("#nav .pbox");
nav.innerHTML = pBox;


const xhr1 = new XMLHttpRequest()
xhr1.open("get","http://chst.vip:1234/api/getproductlist?categoryid="+url+"&pageid="+pageid,true);
xhr1.onload = function(){
    if(xhr1.status === 200){
        let res1 = JSON.parse(xhr1.responseText)
        console.log(res1);

        let main_boxs = "";

        res1.result.forEach(item => {
        
            main_boxs += `<li id="${item.productId}" class="ali"><a href="#">
                            <div class="left">
                            ${item.productImg}
                            </div>
                            <div class="right">
                            <div class="title">
                                <h4>${item.productName}</h4>
                                <span>${item.productPrice}</span>
                            </div>
                            <div class="other">
                                <span>${item.productQuote}</span>
                                <span>${item.productCom}</span>
                            </div>
                            </div>
                            </a></li>`
        });
        main_box.innerHTML = main_boxs;

        let aLi = document.querySelectorAll(".ali");
        console.log(aLi);
        aLi.forEach(index => {
            index.onclick = function(ev){
                // let e = ev || window.event;
                // let target = e.target || e.srcElement;
                // console.log(target.nodeName);
                let ID = index.id;
                console.log(ID);
                location.href = '../html/productdata.html?productid='+ ID;
                // localStorage.setItem("pbox",target.innerHTML);
            }
        })

        var options = "";
        let pageZ = Math.floor(res1.totalCount / 10);
        console.log(pageZ);
        for(var i = 1;i <= pageZ;i++){
            options += `<option value="${i}">${i}/${pageZ}</option>`
        }
        change.innerHTML = options;
        main_box.pageZ = pageZ;




    }
}
xhr1.send(null);



//下一页
after.onclick = function(){
    pageid++;
    if(pageid > main_box.pageZ - 1){
        pageid = main_box.pageZ - 1;
    }
    console.log(pageid,main_box.pageZ - 1);

    ajax(url,pageid);

    // const xhr2 = new XMLHttpRequest();
    // xhr2.open("get","http://chst.vip:1234/api/getproductlist?categoryid="+url+"&pageid="+pageid,true);
    // xhr2.onload = function(){
    //     if(xhr2.status === 200){
    //         let res2 = JSON.parse(xhr2.responseText)
    //         // console.log(res2);

    //         let main_boxs = "";

    //         res2.result.forEach(item => {
            
    //             main_boxs += `<li><a href="#">
    //                             <div class="left">
    //                             ${item.productImg}
    //                             </div>
    //                             <div class="right">
    //                             <div class="title">
    //                                 <h4>${item.productName}</h4>
    //                                 <span>${item.productPrice}</span>
    //                             </div>
    //                             <div class="other">
    //                                 <span>${item.productQuote}</span>
    //                                 <span>${item.productCom}</span>
    //                             </div>
    //                             </div>
    //                             </a></li>`
    //         });
    //         main_box.innerHTML = main_boxs;

    //     }
    // }
    // xhr2.send(null);

    let options = document.querySelectorAll("option");
    // console.log(options);

    options[url,pageid].selected = true;
}


//上一页
before.onclick = function(){
    pageid--;
    if(pageid < 0){
        pageid = 0;
    }
    console.log(pageid,main_box.pageZ);

    ajax(url,pageid);
    // const xhr3 = new XMLHttpRequest();
    // xhr3.open("get","http://chst.vip:1234/api/getproductlist?categoryid="+url+"&pageid="+pageid,true);
    // xhr3.onload = function(){
    //     if(xhr3.status === 200){
    //         let res3 = JSON.parse(xhr2.responseText)
    //         console.log(res3);

    //         let main_boxs = "";

    //         res3.result.forEach(item => {
            
    //             main_boxs += `<li><a href="#">
    //                             <div class="left">
    //                             ${item.productImg}
    //                             </div>
    //                             <div class="right">
    //                             <div class="title">
    //                                 <h4>${item.productName}</h4>
    //                                 <span>${item.productPrice}</span>
    //                             </div>
    //                             <div class="other">
    //                                 <span>${item.productQuote}</span>
    //                                 <span>${item.productCom}</span>
    //                             </div>
    //                             </div>
    //                             </a></li>`
    //         });
    //         main_box.innerHTML = main_boxs;
    //     }
    // }
    // xhr3.send(null);

    let options = document.querySelectorAll("option");
    // console.log(options);

    options[url,pageid].selected = true;
}

change.onclick = function(e){
    var e = e || window.event;
    var target = e.target || e.srcElement;

    pageid = target.value-1;
    
    ajax(url,pageid);
}

//封装
function ajax(url,pageid){
    const xhr = new XMLHttpRequest()
    xhr.open("get","http://chst.vip:1234/api/getproductlist?categoryid="+url+"&pageid="+pageid,true);
    xhr.onload = function(){
        if(xhr.status === 200){
            let res = JSON.parse(xhr.responseText)
            console.log(res);

            let main_boxs = "";

            res.result.forEach(item => {
            
                main_boxs += `<li><a href="#">
                                <div class="left">
                                ${item.productImg}
                                </div>
                                <div class="right">
                                <div class="title">
                                    <h4>${item.productName}</h4>
                                    <span>${item.productPrice}</span>
                                </div>
                                <div class="other">
                                    <span>${item.productQuote}</span>
                                    <span>${item.productCom}</span>
                                </div>
                                </div>
                                </a></li>`
            });
            main_box.innerHTML = main_boxs;

            let aLi = document.querySelectorAll(".ali");
            console.log(aLi);
            aLi.forEach(index => {
                index.onclick = function(){
                    let ID = index.id;
                    console.log(ID);
                    location.href = '../html/productdata.html?productid='+ ID
                }
            })
        }
    }
    xhr.send(null);
}

